import { Divider } from 'antd';
import React, { Component } from 'react'
import { Table, Button, Popconfirm, message, Modal } from 'antd';
import { DownloadOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { getData, del,changeIdentity } from '../../apis/lesseeApi';

export default class LesseeList extends Component {

    componentDidMount() {
        this.getAllUsers();

    }
    state = {
        data: [],
        visible: false,
        currentItem:''

    }
    // 确认删除
    confirm = async (obj) => {
        console.log(obj._id);;
        console.log({ _id: obj._id })
        let data = await del({ _id: obj._id });
        if (data.status) {
            message.success('删除成功');
            this.getAllUsers();
        }


    }
    // 取消删除
    cancel = (e) => {

        message.error('取消成功');
    }
    showModal = (tag2) => {
        this.setState({
            visible: true,
            currentItem:tag2
        });
    };

    handleOk = async (_id)=> {
     
      let data =await changeIdentity({identity:2,_id});
      console.log('sssssss',data);
      if(data.status){
        message.success('认证成功');
        this.getAllUsers();
        this.setState({
            visible: false,
        });
      }
      console.log('data',data);
       
    };

    handleCancel =async (_id) => {
        
      let data =await changeIdentity({identity:3,_id});
      if(data.status){
        message.error('认证失败');
        this.getAllUsers();
        this.setState({
            visible: false,
        });
      }
        this.setState({
            visible: false,
        });
    };
    // 渲染数据
    async getAllUsers() {
        try {
            console.log(111, this.state.data);
            let { data } = await getData();
            console.log(33, data)
            await this.setState({
                data
            })

        } catch (error) {
            console.log('错误', error)
        }

    }
    columns = [
        {
            title: '编号',
            dataIndex: '_id',
            key: 'age',
        },
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: '类型',
            dataIndex: 'status',
            key: 'age',
            render: (text, text2) => {

                if (text == 1) {
                    return <span>出租人</span>
                } else {
                    return <span>车主</span>
                }


            }
        },
        {
            title: '身份验证',
            dataIndex: 'identity',
            key: 'address',
            render: (tag, tag2) => {
                if (tag == 0) {
                    return <span style={{ color: 'red' }}>身份未认证</span>
                } else if (tag == 1) {        
                    return (<><Button type="primary" onClick={()=>this.showModal(tag2)} shape="round" icon={<QuestionCircleOutlined />}>
                        验证信息
                  </Button> 
                 
                   </>)

                } else if(tag==2) {
                    return <span  style={{color:'skyblue'}}>验证已完成</span>
                }else{
                 return <span style={{fontWeight:700}}>身份验证失败</span>
                }
            }
        },
        {
            title: '操作',
            key: 'tags',
            dataIndex: 'tags',
            render: (tag, tag2) => (
                <>
                    <Popconfirm
                        title="你确定要删除吗"
                        onConfirm={() => { this.confirm(tag2) }}
                        onCancel={this.cancel}
                        okText="是的"
                        cancelText="取消"
                    >
                        <Button type="primary" danger>
                            删除    </Button>

                    </Popconfirm>

                </>
            ),
        },

    ];


    render() {
        const {currentItem} = this.state;
        return (<div>
            <Table dataSource={this.state.data} rowKey={"_id"} columns={this.columns} />;
            
                      <Modal
                      title="验证信息"
                      visible={this.state.visible}
                      onOk={()=>{this.handleOk(currentItem._id)}}
                      onCancel={()=>{this.handleCancel(currentItem._id)}}
                      cancelText="认证失败"
                      okText="同意认证"
                  >
                      <div style={{marginLeft: 170}}>
                          <img style={{ width: 100, height: 100 }} src={'http://localhost:3000/images/' + currentItem.imageName} alt="" />
                          <div>姓名：{currentItem.name}</div>
                          <div>电话：{currentItem.telephone}</div></div>
                  </Modal>
                  
        </div>)
    }
}
